import Vue from "vue";
import VueRouter from "vue-router";

import Store from "@/store/index.js";

// 引入element-ui
import { Message } from "element-ui";
// 引入Management组件
import Management from "@/views/management/index.vue";
// 引入用户模块API
import { getPermissionListAPI } from "@/api/user.js";

// 引入vuex
Vue.use(VueRouter);

// 解决重复定向报错
//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push;
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};

// 配置路由规则
const routes = [
  {
    path: "/",
    redirect: "/welcome",
  },
  // login
  {
    name: "Login",
    path: "/login",
    component: () => import("@/views/login/index.vue"),
  },
  // management
  {
    name: "Management",
    path: "/",
    component: Management,
    meta: {
      requireAuth: true,
    },
  },
  // audit
  {
    // name: 'Audit',
    path: "/audit",
    component: Management,
    meta: {
      requireAuth: true,
    },
    // children: [
    //   {
    //     path: '',
    //     component: () => import('@/views/management/audit/vocation.vue'),
    //   },
    //   {
    //     path: 'approve',
    //     component: () => import('@/views/management/audit/approve.vue'),
    //   },
    // ]
  },
  // system
  {
    // name: 'System',
    path: "/system",
    component: Management,
    meta: {
      requireAuth: true,
    },
    // children: [
    //   {
    //     path: '',
    //     component: () => import('@/views/management/system/user.vue'),
    //   },
    //   {
    //     path: 'menu',
    //     component: () => import('@/views/management/system/menu.vue'),
    //   },
    //   {
    //     path: 'role',
    //     component: () => import('@/views/management/system/role.vue'),
    //   },
    //   {
    //     path: 'department',
    //     component: () => import('@/views/management/system/department.vue'),
    //   },
    // ]
  },
  // welcome
  {
    // name: 'Welcome',
    path: "/welcome",
    component: Management,
    meta: {
      requireAuth: true,
    },
    children: [
      {
        path: '',
        component: () => import('@/views/management/welcome/welcome.vue'),
      }
    ]
  },
  // 其他路径跳转到404页面
  {
    name: "404",
    path: "/404",
    component: () => import("@/views/404page/index.vue"),
  },
  // {
  //   path: '*',
  //   redirect: '/404',
  // },
];

const router = new VueRouter({
  routes,
});

/** 请求用户权限列表至vuex */
async function getPermitoVuex() {
  // 发送用户权限列表请求
  let [data, err] = await getPermissionListAPI();
  // 返回err说明令牌有误，删除令牌并跳出
  if (err) {
    // 删除无效令牌
    localStorage.removeItem('userInfo');
    // 返回null说明请求失败
    return null;
  }
  data = data.data;
  // console.log(data.menuList);
  // 保存用户权限列表到vuex
  Store.commit("SetMenuList", data.menuList);
  Store.commit("SetActionList", data.actionList);

  // 返回请求的数据结果
  return data;
}

/** 获取 权限路由集合 */
function getRouteList(menuList) {
  let routeList = []; // 这里是做一个闭包
  /** 递归 menuList 获取路由集合 */
  function pushRoute(menuList) {
    menuList.forEach((route) => {
      // 递归
      if (route.action) {
        // 判断是否末级菜单，将末级菜单信息配置到路由集合
        routeList.push({
          name: route.component,
          path: route.path,
          component: (resolve) =>
            require([
              `@/views/management${route.path.toLowerCase()}.vue`,
            ], resolve),
          meta: {
            title: route.menuName,
          },
        });
      }

      if (route.children) {
        // 如果有children,继续递归查询
        return pushRoute(route.children);
      }

      // 没有children，跳出
      return;
    });
  }
  pushRoute(menuList);
  return routeList;
}

// 动态加载路由函数
export const loadAsyncRoute = async () => {
  // 请求权限列表
  let data = await getPermitoVuex();
  // 如果请求失败，就跳出
  if (!data) return;
  // 获取路由列表
  let routes = getRouteList(data.menuList);
  // console.log(routes);
  // 添加路由
  routes.forEach((route) => {
    router.addRoute("Management", route);
  });
  // console.log(router.getRoutes());
};

// 初次进入页面，需要动态添加路由
await loadAsyncRoute();

// 全局前置路由守卫
router.beforeEach(async (to, from, next) => {
  document.title = to.meta?.title || "后台管理系统";

  // console.log(router.getRoutes());
  // 判断用户前往的路由是否是该系统已存在的路由
  const hasRoute =
    router.getRoutes().some((route) => route.path === to.path) ||
    to.path === "/";
  // 获取登录状态
  const userInfo = localStorage.getItem("userInfo");

  // 阻止已登录状态前往登录页
  if (to.path === "/login" && userInfo) return next(false);
  // 访问其他页面但没登录，直接跳转到登录页
  if (to.path !== "/login" && !userInfo && to.path !== "/404")
    return next("/login");

  // 如果路由已存在，直接放行
  if (hasRoute) return next();

  // 以下需要申请权限列表，动态添加路由
  loadAsyncRoute();

  /* ??? 重复请求 ??? */
  // await loadAsyncRoute();

  // 再判断一次是否访问已存在路由
  const again_hasRoute =
    router.getRoutes().some((route) => route.path === to.path) ||
    to.path === "/";
  // 如果路由依然不存在，直接跳转到404页面
  if (!again_hasRoute) return next("/404");
  // 如果路由存在，放行
  next();

  // // 判断是否需要登录验证
  // let isRequired = to.matched.some((value) => value.meta.requireAuth === true);
  // // 不需要验证，直接放行
  // if (!isRequired) return next();

  // 需要验证登录状态
  // 判断是否有登录令牌,如果没有登录，跳转到登录页
  // if (!userInfo) {
  //   // query携带目标路径跳至登录页
  //   next({ path: '/login', query: { toPath: encodeURI(to.fullPath) } });
  //   Message.error('请先登录');
  //   return;
  // }

  // next();
});

export default router;
